<template>
  <div class="pending">
    <div class="tab_show">
      <el-tabs v-model="formInline.state" @tab-click="handleClick">
        <el-tab-pane label="全部" :name="''" />
        <el-tab-pane label="待付款" name="1" />
        <el-tab-pane label="待发货" name="2" />
        <el-tab-pane label="已发货" name="3" />
        <el-tab-pane label="已完成" name="4" />
        <el-tab-pane label="已关闭" name="5" />
      </el-tabs>
      <!-- 搜索 -->
      <el-form :inline="true" :model="formInline">
        <el-form-item>
          <el-input v-model="formInline.search" placeholder="请输入内容">
            <template #prepend>
              <el-select v-model="formInline.searchType" style="width: 130px" placeholder="请选择">
                <el-option label="订单id" value="1" />
                <el-option label="买家账户" value="2" />
                <el-option label="收件人姓名" value="3" />
                <el-option label="收件人手机号" value="4" />
                <!-- <el-option label="商品ID" value="5" /> -->
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="商户名称">
          <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入" />
        </el-form-item>
        <!-- <el-form-item label="售后状态">
            <el-select v-model="formInline.afterState" placeholder="请选择售后状态">
              <el-option label="全部" :value="null" />
              <el-option label="无售后" value="0" />
              <el-option label="售后中" value="1" />
              <el-option label="售后成功" value="2" />
              <el-option label="售后关闭" value="3" />
            </el-select>
          </el-form-item> -->
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="formInline.dates"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询 </el-button>
          <el-button type="success" @click="orderDataExport">导出订单 </el-button>
          <el-button @click="reset">重置 </el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        border
        stripe
        :header-cell-style="{
          background: 'var(--art-gray-50)',
          color: 'var(--art-text-color-primary)'
        }"
        tooltip-effect="dark"
        style="width: 100%"
        class="dataTable"
      >
        <el-table-column label="订单id" width="150">
          <template #default="scope">{{ scope.row.orderId }}</template>
        </el-table-column>
        <el-table-column prop="number" label="商品数量" width="100" />
        <el-table-column prop="shopName" label="商户名称" width="220" show-overflow-tooltip />
        <el-table-column prop="customerName" label="下单账户" show-overflow-tooltip />
        <el-table-column prop="receiveName" label="收件人" show-overflow-tooltip />
        <el-table-column prop="receivePhone" label="手机号" show-overflow-tooltip />
        <el-table-column prop="price" label="支付金额（元）" width="120" />
        <el-table-column prop="createTime" label="下单时间" show-overflow-tooltip />
        <el-table-column label="订单状态">
          <template #default="scope">
            <span v-if="scope.row.state == 1" :style="{ color: 'var(--art-warning-color)' }"
              >待付款</span
            >
            <span v-if="scope.row.state == 2" :style="{ color: 'var(--art-danger-color)' }"
              >待发货</span
            >
            <span v-if="scope.row.state == 3" :style="{ color: 'var(--art-primary-color)' }"
              >已发货</span
            >
            <span v-if="scope.row.state == 4" :style="{ color: 'var(--art-success-color)' }"
              >已完成</span
            >
            <span v-if="scope.row.state == 5" :style="{ color: 'var(--art-text-color-secondary)' }"
              >已关闭</span
            >
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <div class="btnList">
              <el-button link type="primary" @click="seeMore(scope.row)">查看 </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          :current-page="formInline.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="detailVisible"
      title="订单详情"
      width="74%"
      center
      :close-on-click-modal="false"
    >
      <OrderDetail :detail-row="form" @cancel="cancel" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import OrderDetail from './pendDetails.vue'
  import { getPendingOrderList, exportPendingOrder } from '@/api/orderApi'
  import { onMounted, ref } from 'vue'
  import { ElMessage } from 'element-plus'

  const formInline = ref({
    searchType: '1',
    search: '', // 搜索字段
    state: '',
    // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
    dates: [] as string[], // 下单时间数组
    page: 1,
    shopName: '',
    pageSize: 10
  })
  const total = ref(1)
  const tableData = ref<any[]>([])
  const tableLoading = ref(false)
  const detailVisible = ref(false)
  const form = ref({})

  onMounted(() => {
    getAll(formInline.value)
    handleClick({ paneName: '' })
  })

  function handleSizeChange(val: number) {
    formInline.value.pageSize = val
    getAll(formInline.value)
  }

  function handleCurrentChange(val: number) {
    formInline.value.page = val
    getAll(formInline.value)
  }

  function handleClick(tab: { paneName: string | number | undefined }) {
    formInline.value.state = (tab.paneName || '').toString()
    formInline.value.page = 1
    getAll(formInline.value)
  }

  //  查询
  function search() {
    total.value = 1
    formInline.value.page = 1
    getAll(formInline.value)
  }

  // 详情
  function seeMore(row: any) {
    detailVisible.value = true
    form.value = row
    // $router.push({
    //   name: 'pendDetails',
    //   params: { orderId: row.orderId }
    // })
  }

  function cancel() {
    detailVisible.value = false
  }

  // 初始化查询所有数据
  async function getAll(formInline: any) {
    tableLoading.value = true
    try {
      const res = await getPendingOrderList(formInline)
      tableData.value = res.data.list
      total.value = res.data.total
    } finally {
      tableLoading.value = false
    }
  }

  // 导出订单
  async function orderDataExport() {
    ElMessage({
      message: '数据导出中，请勿重复操作！',
      type: 'success'
    })
    try {
      const res = await exportPendingOrder(formInline.value)
      if (!res) {
        return
      }
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
      const fileName = '订单数据明细表.xls'
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        if ((navigator as any).msSaveBlob) {
          ;(navigator as any).msSaveBlob(blob, fileName)
        }
      }
    } catch (error) {
      console.error('导出订单失败:', error)
    }
  }

  // 重置
  function reset() {
    formInline.value = {
      searchType: '1',
      search: '',
      state: '',
      dates: [] as string[],
      page: 1,
      shopName: '',
      pageSize: 10
    }
    getAll(formInline.value)
  }
</script>

<style lang="scss" scoped>
  .pending {
    padding: 20px;
    margin-top: 20px;
    background-color: var(--art-bg-color);
  }
  .fenye {
    margin-top: 20px;
  }
  // .tab_show {
  //   padding-left: 30px;
  // }
</style>
